<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="set">
        省：<select name="" id="pro">
            <option value="">请选择1</option>
        </select>
        市：<select name="" id="city">
            <option value="">请选择</option>
        </select>
        区：<select name="" id="area">
            <option value="">请选择</option>
        </select>
        详细地址：<input type="text" id="det">
        <button>确认</button>
    </div>
    <script src="../js/data.js"></script>
    <script>
        class Reset {
            constructor(ele) {
                this.data = data;
                this.ele = this.get(ele);
                this.Opro = this.ele.querySelector('#pro');
                this.oCity = this.ele.querySelector('#city');
                this.oArea = this.ele.querySelector('#area');
                this.oDet = this.ele.querySelector('#det');
                this.oBtn = this.ele.querySelector('button');
                this.click();
                this.change();
            }
            get(ele) {
                return document.querySelector(ele)
            }
            render(data, ele) {
                let html = data.reduce((prev, item) => {
                    return prev + `<option value="${item.name}">${item.name}</option>`
                }, '<option value="">请选择</option>')
                this.get(ele).innerHTML = html;
            }
            click() {
                this.oBtn.onclick = () => {
                    if (this.Opro.value === '' || this.oCity.value === '' || this.oDet.value === '') {
                        alert('请输入完整地址信息！')
                        return;
                    }
                    let addrStr = this.Opro.value + ',' + this.oCity.value + ',' + this.oArea.value + ',' + this.oDet.value;
                    localStorage.setItem('qwe', addrStr);
                    alert('修改完成！')
                }
            }
            change() {
                const { list } = this.data;
                if (list) {
                    this.render(list, '#pro');
                }
                this.Opro.onchange = () => {
                    const proVal = this.Opro.value;
                    this.oArea.innerHTML = '<option value="">请选择</option>';
                    if (!proVal) {
                        this.oCity.innerHTML = '<option value="">请选择</option>';
                    } else {
                        const cityList = list.filter(item => {item.name === proVal})[0].list;
                        console.log(cityList);
                        if (cityList) {
                            this.render(cityList, '#city');
                        }
                        console.log(this.oCity);
                        this.oCity.onchange = () => {
                            const cityVal = this.oCity.value;
                            if (!cityVal) {
                                this.oArea.innerHTML = '<option value="">请选择</option>';
                            } else {
                                const AreaList = cityList.filter(item => item.name === cityVal)[0].list;
                                if (AreaList) {
                                    this.oArea.style.visibility = 'visible';
                                    this.render(AreaList, '#area');
                                } else {
                                    this.oArea.style.visibility = 'hidden';
                                }
                            }

                        }
                    }
                }



                let addrStr = localStorage.getItem('qwe');
                if (!addrStr) {
                    addrStr = '湖北,武汉,江夏,金融港';
                }
                if (addrStr) {
                    let addrArr = addrStr.split(',');

                    for (let i = 0; i<this.Opro.options.length; i++) {
                        if (addrArr[0] === this.Opro.options[i].value) {
                            this.Opro.options[i].selected = 'selected';
                            this.Opro.value = addrArr[0];
                        }

                        
                        let event = new Event('change');
                        //、dispatchEvent颁发执行选择事件   --- 主动触发事件
                        this.Opro.dispatchEvent(event);
                        for (let i = 0; i<this.oCity.options.length; i++) {
                            if (addrArr[1] === this.oCity.options[i].value) {
                                this.oCity.options[i].selected = 'selected';
                                this.oCity.value = addrArr[1];
                            }
                        }
                        this.oCity.dispatchEvent(event);
                        if (addrArr[2] === '') {
                            this.oArea.style.visibility = 'hidden';
                        } else {
                            this.oArea.style.visibility = 'visible';
                            this.oArea.value = addrArr[2]
                        }
                        this.oDet.value = addrArr[3];
                    }

                }
            }




            }
        new Reset('.set')
    </script>
</body>

</html>